<script type="text/javascript">
$(document).ready(function(){
    $('#national-matter-cancel').click(function(){
        $('#add-matter-popup').css('display', 'none');
        $('#facade').css('display', 'none');
    });

   $('#national-matter-submit').live('click', function(){
        var form_data = $('#add-matter-form').serializeArray();
        var invalid = false;
        $('.validation-errors').empty();
        if(invalid)
            $('.validation-errors').css('display', 'block');
        else{
            $('.validation-errors').css('display', 'none');
            $.ajax({
                url: '/matter/national',
                type: 'POST',
                data: { fdata : form_data,
                        matter_ID :$('#this-matter-id').val(),
                      },
                success: function(data){
                    if( data > 0 ){
                      //  alert("Matter added!");
                    $('#add-matter-popup').css('display', 'none');
                    $('#facade').css('display', 'none');
                    $(location).attr("href", '/matter/filter/Ref/' + $('#matter-caseref-id').val() + '/origin/' + $('#matter-origin-id').val());
                   }else
                      alert("Adding matters failed");
                }
            });
        }
   });

   $('.matter-country').live('change', function(){
     if($(this).val() == 0){
       var tname = $(this).attr('name');
       var inputObj = $('<input name="dis_'+ tname +'" class="matter-country required" id="" style="width:140px;border:1px solid #888;-moz-border-radius:3px;-webkit-border-radius:3px;padding:3px 2px;" /><input name="'+tname+'" type="hidden" value="" />');
       $(this).replaceWith( inputObj );
//       tobj = $('input[name='+tname+']');
        inputObj.autocomplete({
        minLength: 1,
        source: "/matter/get-country-codes",
        focus: function(event, ui){
            return false;
        },
        autoFocus: true,
        select: function( event, ui ) {
                    $(this).val( ui.item.value );
                    $('input[name="'+tname+'"]').val( ui.item.id );
                 return false;
        },
        change: function( event, ui ){
                    valid=true;
                    if ( !ui.item ) {
                      valid=false;
                    }
                   if ( !valid ) {
                     // remove invalid value, as it didn't match anything
                      $input.val( "" );
                      $input.data( "autocomplete" ).term = "";
                      return false;
                   }
                 return false;
        }
    });
     }
   });

   $('.entered-date').live("click", function(){
      var aid = $(this).attr('id');
      var alt_id = 'alt-entered-date-'+aid;
      $(this).datepicker({
        showOn: 'focus',
        //minDate: +0,
        dateFormat: 'dd/mm/yy',
        defaultDate: '<?php echo date('d/m/Y');?>',
        altField: '#'+alt_id,
        altFormat: 'yy-mm-dd',
      }).focus();
   });

   $('#national-matter-plus').click(function(){
     var mindex = $('#national-phase-matters > div').size();
     var sname = "matter_country["+mindex+"]";

     var select_options = "";  
     clobj = $('#matter-country-demo option').clone();
     $(clobj).each(function(i,j){
       select_options += '<option value="'+j.value+'" >'+j.text+'</option>';
     });
     var new_matter = '<div id="nmp-' + mindex + '"><span style="display:inline-block;width:250px;"><select name="'+ sname +'" class="matter-country required" id="'+sname+'" >'+select_options+'</select></span><input type="text" name="entered_date['+mindex+']" class="entered-date" value="" /><input type="hidden" name="alt_entered_date['+mindex+']" id="alt-entered-date['+mindex+']" /><span class="national-matter-remove ui-icon ui-icon-trash" id="'+mindex+'" style="float: left;"></span></div>';
     $('#national-phase-matters').append(new_matter);
   });

   $('.national-matter-remove').live("click", function(){
     var rid = $(this).attr('id');
     $('#nmp-'+ rid).remove();
   });
   $( "button, input:button").button();
});
</script>
<style type="text/css" >
#add-matter-head{
  display:block;
  width: 400px;
  background: #1E4262;
  color: #FFF;
  padding: 5px;
  border: 1px solid #1E4262;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
}

#add-matter{
  width: 400px;
  background: #FFF;
  display: block;
  border: 1px inset #888;
  padding: 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
}
#add-matter label{
  display: inline-block;
  text-align: right;
  width: 75px;
  margin: 0px 5px 10px 0px;
}
#child-matter-options {
  border-top: 1px solid #DDD;
  padding-top: 8px;
}
#child-matter-options span{
  display:inline-block;
  text-align: right;
  width: 150px;
}
#child-matter-options label{
  text-align: left;
  width: 150px;
}
#add-matter input[type="text"]{
  width: 140px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px inset #888;
  padding: 3px 2px;
}
#add-matter-actions{
  margin: 10px 0px 0px 0px;
  margin-left:30px;
}

.required-field{
  color: #f00;
  font-weight: bold;
  margin-right:4px;
}
.validation-errors{
display:none;
border:1px solid #f00;
color:#f00;
padding:5px;
width: auto;
margin-bottom: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.validation-errors span{
    display: block;
    width: auto;
    margin-left: 20px;
}
.display-field{
  display: inline-block;
  width: 140px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px solid #888;
  padding: 1px 2px;
  vertical-align: top;
  margin-bottom: 2px;
  min-height: 14px;
}
#national-phase-matters select{
  width: 150px;
}
.national-countries{
  display: inline-block;
  width: 250px;
}
.entered-date{
  width: 100px !important;
}
.national-matter-remove{
  margin-left: 15px;
  cursor: pointer;
}
</style>

<div class="place-card">
<div id="add-matter-head">
Enter national phase <?=$this->caseref ?> <?=$this->country_code ?>
</div>
<div id="add-matter">
<div class="validation-errors">

</div>
<form type="post" id="add-matter-form" >

<input type="hidden" name="matter-caseref-id" id="matter-caseref-id" value="<?=$this->caseref?>" />
<input type="hidden" name="matter-category-code" id="matter-category-code" value="<?=$this->category_code?>" />
<input type="hidden" name="matter-origin-id" id="matter-origin-id" value="<?=$this->country_code?>" />
<div id="national-phase-matters" style="display:block; padding-top:10px;">

<label style="margin-left: 22px; width: 253px; text-align: left;"><span class="required-field">*</span>Country</label><label style="text-align:center;">Entered date</label>

<?php 
$i=0;
foreach($this->country_options as $cflag){ ?>
<div id="nmp-<?=$i?>" >
<input type="hidden" name="matter_country[<?=$i?>]" value="<?=$cflag['iso']?>" />
<span class="national-countries"><?=$cflag['name']?></span><input type="text" name="entered_date[<?=$i?>]" class="entered-date" value="" id="<?=$i?>"/><input type="hidden" name="alt_entered_date[<?=$i?>]" id="alt-entered-date-<?=$i?>" value="" /><span class="national-matter-remove ui-icon ui-icon-trash" id="<?=$i?>" title="Remove" style="float: left;"></span>
</div>
<?php $i++; } ?>

</div>

<div id="add-matter-actions">
<input type="button" name="national-matter-cancel" id="national-matter-cancel" value="Cancel" style="float:right; margin-left: 4px;" />
<input type="button" name="national-matter-submit" id="national-matter-submit" value="Submit" style="float:right;" />
<input type="button" name="national-matter-plus" id="national-matter-plus" value="Add country" />
</div>
</form>
<select name ="matter_country_demo" id="matter-country-demo" style="display:none;">
<?php foreach($this->country_options as $cflag){ ?>
<option value="<?=$cflag['iso']?>" ><?=$cflag['name']?></option>
<?php } ?>
<option value="0" >more...</option>
</select>
</div>
</div>
